<template>
	<view class="all">
		<view class="top">
			<uni-icons class="fanhui" color=white type="arrowleft" size="25" @click="back"></uni-icons>
			<view class="biaoti">消息中心</view>
		</view>
		<view class="quyu">
			<view class="xiaogezi1" @click="dianzan">
				<image :src="require('../../static/message-box/pictures/zan.png')" class="img">
					<view class="wenzi">点赞</view>
			</view>
			<view class="xiaogezi2" @click="pinglun">
				<image :src="require('../../static/message-box/pictures/comment.png')" class="img">
					<view class="wenzi">评论</view>
			</view>
			<view class="xiaogezi3" @click="shoucang">
				<image :src="require('../../static/message-box/pictures/collect.png')" class="img">
					<view class="wenzi">收藏</view>
			</view>
			<view class="xiaogezi4">
				<image :src="require('../../static/message-box/pictures/fensi.png')" class="img">
					<view class="wenzi" style="color: #b872e0;">粉丝</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="xinxiquyu" show-scrollbar='false'>
			<view class="message_box" v-for="item in message">
				<image :src="item.user.avatar" class="pic"></image>
				<view class="wenben">
				<text class="mingcheng">{{item.user.userName}}</text>
				<view class="message">关注了你</view>
				<view class="time">10-18</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getmessage(this.userId);
		},
		data() {
			return {
				userId:'aiqiu',
				message:{},
			};
		},
		methods: {
			getmessage(userId)
			{
				uni.request({
					url:"http://ronin.fun:8888/msg/fans",
					method:"GET",
					data:{
						userId:userId,
					},
					success: (res) => {
						this.message=res.data.data;
						console.log(this.message);
					}
				})
			},
			dianzan() {
				uni.navigateTo({
					url: './dianzan'
				})
			},
			pinglun() {
				uni.navigateTo({
					url: './pinglun'
				})
			},
			shoucang() {
				uni.navigateTo({
					url: './shoucang'
				})
			},
			back()
			{
				uni.navigateBack({})
			}
		}
	}
</script>

<style scoped>
	.all {
		width: 100vw;
		height: 100vh;
	}
	
	.top {
		height: 10vh;
		width: 100vw;
		background-color: #c0e9ff;
		position: relative;
	}
	
	.fanhui {
		position: relative;
		top: 90rpx;
		left: 30rpx;
	}
	
	.biaoti {
		font-size: 35rpx;
		color: white;
		position: relative;
		top: 40rpx;
		left: 40vw;
	}

	.quyu {
		width: 100vw;
		height: 18vh;
		text-align: center;
		background-color: #f4f4f4;
	}
	
	.img {
		margin-top: 2.5vh;
		width: 90rpx;
		height: 90rpx;
		position: relative;
	}
	
	.wenzi {
		font-size: 38rpx;
		position: relative;
		top:1vh;
	}

	.xiaogezi1 {
		width: 20vw;
		height: 14vh;
		background-color: white;
		border-radius: 20rpx;
		border: 1px solid white;
		position: relative;
		left: 4vw;
		top: 2vh;
	}
	
	.xiaogezi2 {
		width: 20vw;
		height: 14vh;
		background-color: white;
		border-radius: 20rpx;
		border: 1px solid white;
		position: relative;
		left: 28vw;
		top: -12vh;
	}
	
	.xiaogezi3 {
		width: 20vw;
		height: 14vh;
		background-color: white;
		border-radius: 20rpx;
		border: 1px solid white;
		position: relative;
		left: 52vw;
		top: -26vh;
	}
	
	.xiaogezi4 {
		width: 20vw;
		height: 14vh;
		background-color: white;
		border-radius: 20rpx;
		border: 1px solid white;
		position: relative;
		left: 76vw;
		top: -40vh;
	}

	.message_box {
		width: 100vw;
		height: 9vh;
	}

	.pic {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		position: relative;
		left: 40rpx;
		top:20rpx;
	}
	.xinxiquyu
	{
		width: 100vw;
		height: 72vh;
	}
	.wenben
	{
		width: 68vw;
		height: 9vh;
		position: relative;
		left:26vw;
		top:-7.9vh;
		border-bottom: 1rpx solid #dcdcdc;
	}
	.mingcheng
	{
		color: #797979;
		font-size: 38rpx;
		font-weight: bold;
		position: relative;
		top:1.5vh;
	}
	.message
	{
		color: #797979;
		font-size: 34rpx;
		position: relative;
		top:2.5vh;
	}
	.time
	{
		color: #797979;
		font-size: 25rpx;
		position: relative;
		left:56vw;
		top:0vh;
	}
</style>
